<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .shop-box {
            width: 274px;
            /* 因为填充，减去填充值 */
            height: 225px;
            /* 背景图片 */
            background: url('https://image3.vipmro.net//smbPchomeImg/cd6e184d-c76b-4c8f-8f63-b81eebc2effa.png');
            /* 背景图片填充 */
            background-size: cover;
            padding-top: 130px;
        }

        .pro-list {
            /* margin-top: 150px; */
        }

        .pro-list img {
            width: 90px;
        }

        .pro-r {
            display: inline-block;
            width: 154px;
        }

        .pro-r h6 {
            width: 100%;
            height: 48px;
            font-size: 14px;
            line-height: 24px;
            color: #333;
            font-weight: normal;
            /* 行数  -webkit- chrom的兼容前缀*/
            -webkit-line-clamp: 2;
            /* 排列方向 */
            -webkit-box-orient: vertical;
            /* 超出文本为省略号 */
            text-overflow: ellipsis;
            overflow: hidden;
            /* 将元素设置成盒子 */
            display: -webkit-box;

            margin-bottom: 20px;
        }

        .price {
            color: red;
            font-size: 14px;
        }

        .price span {
            font-size: 18px;
        }

        .tip {
            color: red;
            font-size: 14px;
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <!-- 店铺 -->
    <div class="shop-box">
        <!-- 产品列表 -->
        <ul class="pro-list">
            <li>
                <!-- 左 -->
                <img src="https://img20.360buyimg.com/vc/s170x170_jfs/t1/155083/38/13963/137615/5ffd450cE5d0cc731/7ef5b63caa8dc03f.jpg!dpg.webp"
                    alt="">
                <!-- 右 -->
                <div class="pro-r">
                    <h6> 盖歇茂（GXM）帆布手套双层24道线耐磨电焊手套机床机械手套10双/包 </h6>
                    <div class="info">
                        <span class="price">&yen;<span>26.90</span></span>
                        <span class="tip">特惠价</span>
                    </div>
                </div>
            </li>
            <li>
                <!-- 左 -->
                <img src="https://img20.360buyimg.com/vc/s170x170_jfs/t1/155083/38/13963/137615/5ffd450cE5d0cc731/7ef5b63caa8dc03f.jpg!dpg.webp"
                    alt="">
                <!-- 右 -->
                <div class="pro-r">
                    <h6> 盖歇茂（GXM）帆布手套双层24道线耐磨电焊手套机床机械手套10双/包 </h6>
                    <div class="info">
                        <span class="price">&yen;<span>26.90</span></span>
                        <span class="tip">特惠价</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>

</body>

</html>